<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link> |
     <router-link :to="'/user/'+userId">User</router-link> |
     <router-link :to="{path:'/profile',query:{name:userId,age:18}}">Profile</router-link> 
      <button @click="profileClick">Profile</button>


    </div>
    <!-- 取消Profile组件的keep-alive -->
    <keep-alive exclude="Profile">
      <router-view/>    
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId: 'lion'
    }
  },
  methods:{
    // 方法控制路由,并传递参数
    profileClick(){
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.8
        }
      })
    }
  }
}
</script>
<style>

</style>
